<style lang="scss">
.z-form__array-con {
  border: 1px solid #eee;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
</style>

<template>
  <div id="app">
    <div class="page" v-if="page.inited">
      <form-loader
          ref="formLoader"
          :name="res.comName" :listener="listener"
          @loaded="onFormLoaded"
      ></form-loader>
    </div>
    <div>
      <el-button @click="submitForm('formLoader', $event)">提交</el-button>
<!--      <el-button @click="importData('formLoader')">回填</el-button>-->
      <el-button @click="setSelect('formLoader')">回填</el-button>
    </div>
  </div>
</template>

<script>
import {reqVueFile} from "@/apis/common";

const STORE_NAME = 'test-vue2';



export default {
  name: 'App',
  components: {
    // FormA
  },
  data() {
    let self = this
    return {
      page: {
        formConfig: {},
        inited: false
      },
      res: {},
      listener: {
        ['form-submit']: function (args) {
          console.log(self, args)
          self.onSubmitForm(args)
        }
      },
      url:  new URL(location.href),
      storeName: STORE_NAME,
    }
  },
  async beforeMount() {
    // this.initPage()
    globalThis.ElementUI = {
      Message: this.$message,
    }

    let isStatic = this.url.searchParams.get('static');
    if (isStatic) {
      await this.initPageFromStatic(isStatic)
    } else {
      await this.initPageFromServer()
    }
  },
  mounted() {
    setTimeout(() => {
      // this.setSelect('formLoader')
    }, 1000)
  },
  methods: {
    onFormLoaded() {
      let form =  this.$refs['formLoader'].getCurForm()
      if (form ) {
        console.log(form)
      }
    },
    private_getMetas() {
      let url = this.url;
      let activeNo = url
          .searchParams.get('activeNo');
      let tableName = url
          .searchParams.get('tableName')
      return {
        activeNo,
        tableName
      }
    },
    /**
     * 渲染
     * @param vueFileStr
     * @param metas
     * @returns {Promise<void>}
     */
    async private_parse(vueFileStr = '', metas = {}) {
      try {
        this.res = await globalThis.zParseVueComponent({
          template: vueFileStr, metas});
      } catch (e) {
        console.log('parse err',vueFileStr, e)
      }
    },
    /**
     * 从服务器拉取代码
     * @returns {Promise<void>}
     */
    async initPageFromStatic(isStatic) {
      let metas = this.private_getMetas()

      let res = await import('./static')

      let vueFileStr = ''
      try {
        vueFileStr = ZY.getHereDoc(res.getExampleVue(isStatic))
      } catch (e) {
        vueFileStr = res.getExampleVue(isStatic)
      }

      // console.log(vueFileStr)
      await this.private_parse(vueFileStr, metas)
      this.page.inited = true
    },
    /**
     * 从服务器拉取代码
     * @returns {Promise<void>}
     */
    async initPageFromServer() {
      let metas = this.private_getMetas()
      // const store_vars = await ZY_EXT.store.getItem(STORE_NAME);

      // this.page.formConfig = store_vars?.value ?? []
      // let html = document.getElementById('idtpl').innerHTML
      // console.log(html)
      if (!metas.activeNo) {
        console.log('no activeNo', err)
        return;
      }


      let [err, vueFileStr] = await ZY.awaitTo(reqVueFile({
        activeNo: metas.activeNo
      }));
      if (err) {
        console.log('get file failed', err)
        return;
      }
      // console.log(vueFileStr)

      await this.private_parse(vueFileStr, metas)

      this.page.inited = true
    },
    async onSubmitForm({scope}) {
      let {ctx} = scope;
      let [isValid, errors] = await ctx.submit()
      if (isValid) {
        let model = await ctx.getRawData();
        let metas = ctx.getMetas();
        console.log(model, metas)
        // globalThis.Req.post('/api/zy-boot/json/addJson', {
        //   tableName: metas.tableName,
        //   model: model
        // })
      } else {
        console.log('onSubmitForm err', errors)
      }
    },
    async submitForm(flg = 'formLoader') {
      // console.log(this.$refs.formLoader)
      let curForm = this.$refs[flg].getCurForm()
      if (curForm) {
        this.onSubmitForm({
          scope: {
            ctx: curForm
          }
        })
      }
    },
    async importData(flg) {
      let obj = {
        "field__F4x7elGrQv": "option1"
      }
      // console.log(obj)
      let curForm = this.$refs[flg].getCurForm()
      if (curForm) {
        curForm.importData(obj)
      }
    },
    getTestData(testData, properties, {pathArr = []} = {}) {
      let lodash = ZY.lodash
      let self = this
      lodash.each(properties, function (property, propKey) {
        // console.log(property, propKey)
        if (property.type === 'array') {
          lodash.set(testData, pathArr.concat([propKey]), [])
          self.getTestData(testData, property.items.properties, {
            pathArr: pathArr.concat([propKey, 0])
          })
        }
        else {
          let randomContent = 1
          let widget =property?.ui?.widget
          if (widget === "CusRichEditor") {
            randomContent = `<p class="w-e-p">FOO5NistrTT4dEHZvnVhl</p><p class="w-e-p">sdsdsds</p><div data-w-e-type="todo" class="w-e-div"><input type="checkbox" disabled="" class="w-e-input">1111是多少</div>`
          }
          lodash.set(testData, pathArr.concat([propKey]), randomContent)
        }
      })
    },
    /**
     * 回填
     * @param flg
     * @returns {Promise<void>}
     */
    async setSelect(flg) {

      // console.log(obj)
      let curForm = this.$refs[flg].getCurForm()
      if (curForm) {
        let part = curForm.getConfig()
        let properties = ZY.deepGet(part, 'def.properties')
        // console.log(properties)

        let testData = {}
        this.getTestData(testData, properties, {
          pathArr: []
        })
        console.log(testData)

        // curForm.setModelByPath("field__F4x7elGrQv", "option1")

        // curForm.setRefField('depart', "option1")
        curForm.importData(testData)
      }
    },
    // async loadFile() {
    //   let JSON5 = ZY.JSON5;
    //   let obj = await ZY_EXT.fileOpenJSON5();
    //   if (obj.data) {
    //     try {
    //       let cloned = JSON5.parse(JSON5.stringify(obj.data));
    //       // console.log(cloned)
    //       await ZY_EXT.store.setItem(STORE_NAME, cloned);
    //       location.reload();
    //     } catch (e) {
    //       console.log('loadFile parse err', e)
    //     }
    //   }
    // },
    // destory() {
    //   this.page.inited = false
    // }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
